<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<template v-if="isLogin">
			  
			<view class="body">
				<view class="form-wrap m-b2">					
					
					<view class="form-item">
						<view class="label">包装类型：</view>
						<picker class="form-picker" mode="selector" :range="allSpecs.potionPackTypes" range-key="pack_name" @change="changePack">
							<view class="picker">
								<input type="text" class="select-data t-l" v-model="params.pack.name" placeholder="选择包装类型"
									disabled>
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</picker>
					</view> 
					
					<view v-if="params.pack.name" class="form-item">
						<view class="label">药剂单位：</view>
						<picker class="form-picker" mode="selector" :range="allSpecs.potionUnits" range-key="alias_name" @change="changeUnits">
							<view class="picker">
								<input type="text" class="select-data t-l" v-model="params.unit.name" placeholder="选择药剂单位"
									disabled>
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</picker>
					</view> 
					
					<view v-if="params.unit.name" class="form-item">
						<view class="label">规 格：</view>
						<view class="form-input">
							<view class="content">
								<input type="digit" class="inp" v-model="params.unit_count" :placeholder="'输入每'+params.pack.name+'规格'" @input="setSpecs"/> 
							</view>
						</view>
					</view> 
						
					<view v-if="params.unit_count" class="form-item">
						<view class="label">药剂规格：</view>
						<view class="form-input">
							<view class="content">
								<view class="inp">{{params.unit_alias_name}}</view>
							</view>
						</view>
					</view>

				</view>


			</view>

			<!-- 底部 -->
			<view class="footer">
				<view class="fix-wrap bottom">
					<view class="btn" @click="submit" >确定添加</view>
				</view>
			</view>  
		</template>
	</view>
</template>

<script>
	import {
		dateFormat,
		uploadImage,
		previewImage,
		uploadToServe
	} from '@/common/util.js'
	export default {
		name: 'name',
		data() {
			return { 
				isLogin: true,
				isIphoneX: getApp().globalData.isIphoneX,
				userInfo:uni.getStorageSync('userInfo'), 
				isStop: true,
				allSpecs:{}, 
				params:{
					unit_alias_name:'',
					pack:{
						id:'',
						name:''
					},
					unit_count:'',
					unit:{
						id:'',
						name:''
					}
				} 
			}


		},
		async onLoad(params) { 
			this.isLogin = await this.$loginState('check');		
			if(this.isLogin){
				this.getPotionSpecs();			// 获取药剂规格参数 
			} 
		},
		async onShow() {

		},
		methods: {
			
			// 获取药剂规格参数
			getPotionSpecs:async function(){
				let res=await this.$api.ycj_api.getPotionSpecs();  
				if(res.data.ret==0){ 
					this.allSpecs=res.data.data;
				}
			},	 
			
			// 切换包装类型
			changePack:function(e){
				let idx=e.detail.value;
				this.params.pack.id = this.allSpecs.potionPackTypes[idx].id;
				this.params.pack.name =this.allSpecs.potionPackTypes[idx].pack_name; 
			},
			
			// 切换药剂单位
			changeUnits:function(e){
				let idx=e.detail.value;
				this.params.unit.id = this.allSpecs.potionUnits[idx].id;
				this.params.unit.name =this.allSpecs.potionUnits[idx].alias_name;
			},
			
			// 组合规格
			setSpecs:function(){
				this.params.unit_alias_name=this.params.unit_count+this.params.unit.name+'/'+this.params.pack.name;
			},
			
			
			
			// 添加药剂规格
			submit:async function(){
				let _this=this;
				if(this.params.pack.name==''){
					uni.showToast({
						icon: 'none',
						title: '请选择包装类型',
						mask: true,
						duration: 1000
					})
					return
				}
				if(this.params.unit.name==''){
					uni.showToast({
						icon: 'none',
						title: '请选择单位',
						mask: true,
						duration: 1000
					})
					return
				}
				if(this.params.unit_count==''){
					uni.showToast({
						icon: 'none',
						title: '请输入每'+this.params.pack.name+'规格',
						mask: true,
						duration: 1000
					})
					return
				}else if(!(/(^[1-9]\d*$)/.test(this.params.unit_count))){
					uni.showToast({
						icon: 'none',
						title: '请输入正确的规格数量',
						mask: true,
						duration: 1000
					})
					return
				}				 
				
				uni.showLoading({
					title:"数据提交中..."
				})
				
				if(this.isStop){
					this.isStop=false;
					let res=await this.$api.ycj_api.addSpecs({
						pack_id: this.params.pack.id,
						pack_name: this.params.pack.name,
						unit_alias_name: this.params.unit.name,
						unit_id: this.params.unit.id,
						unit_count: this.params.unit_count
					}) 
					if(res.data.ret==0){
						uni.hideLoading();
						this.$store.commit('UPDATE_YAOJI_SPECS',true);
						uni.showToast({
							icon: 'success',
							title: '添加成功',
							mask: true,
							duration: 2000,
							success() {
								setTimeout(()=>{
									_this.isStop=true;
									uni.navigateBack({
										delta:1
									})
								},2000)
							}
						})
					}else{
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							image:'../../static/image/error.png',
							title: res.data.message,
							mask: true,
							duration: 2000,
							success() {
								setTimeout(()=>{
									_this.isStop=true; 
								},2000)
							}
						})
					}
				}
				 
				
			} 
 
		},
		components: {},

		computed: {

		},
		watch: {

		}

	}
</script>

<style lang="less">
	.form-wrap .label {
		width: 35%;
	}

	.form-wrap .content .link {
		color: #000;
	}

	.status {
		padding: 0 20rpx;
		color: #f00;
		font-size: 28rpx;
	}

	.btn {
		@h: 80rpx;
		width: 98%;
		margin: 10rpx auto;
		text-align: center;
		height: @h;
		line-height: @h;
		background: linear-gradient(#e96b5c, #ce3c2f);
		border-radius: 10rpx;
		color: #fff;
		font-size: 34rpx;
	}

	 
</style>
